<template>
	<view class="detail-container" :class="{ 'safe-area': isIphoneX }" :data-theme="themeStyle">
		<!-- 订单状态 -->
		<view style="background-color: #FF5722;" class="status-wrap color-base-bg" :style="{ backgroundImage: 'url(' + $util.img('uniapp/order/status-wrap-bg.png') + ')' }">
			<view class="order-status-left">
				<image :src="$util.img('uniapp/order/order-icon.png')" v-if="orderData.order_status==0"></image>
				<image :src="$util.img('uniapp/order/order-icon-send.png')" v-if="orderData.order_status==1"></image>
				<image :src="$util.img('uniapp/order/order-icon-close.png')" v-if="orderData.order_status==-1"></image>
				<image :src="$util.img('uniapp/order/order-icon-receive.png')" v-if="orderData.order_status==2"></image>
				<image :src="$util.img('uniapp/order/order-icon-received.png')" v-if="orderData.order_status==3"></image>
				
				<view class="status-name">
					<view class="name">{{ orderData.order_status_name }}</view>
					<view class="desc" v-if="orderData.promotion_type == 'presale' && orderData.order_status == 1">预计{{ $util.timeStampTurnTime(orderData.predict_delivery_time, true) }}日后发货</view>
				</view>
			</view>
		</view>

		<!-- 地址信息 -->
		<view class="address-wrap">
			<view class="icon"><view class="iconfont iconlocation"></view></view>
			<view class="address-info">
				<view class="info">
					<text class="font-size-base">{{ orderData.name }}&nbsp;{{ orderData.mobile }}</text>
				</view>
				<view class="detail">
					<text class="font-size-base">收货地址：{{ orderData.full_address }} {{ orderData.address }}</text>
				</view>
			</view>
		</view>

		<!-- 店铺 -->
		<view class="site-wrap">
			<!-- <view class="site-header">
				<view class="iconfont icondianpu"></view>
				<text class="site-name">{{ orderData.site_name }}</text>
				<view class="iconfont iconright"></view>
			</view> -->
			<view class="site-body">
				<view class="goods-wrap" v-for="(goodsItem, goodsIndex) in orderData.order_goods" :key="goodsIndex">
					<view class="goods-img" @click="goDetail(goodsItem.sku_id)">
						<image :src="goodsItem.sku_image" @error="imageError(goodsIndex)" mode="aspectFill"></image>
					</view>
					<view class="goods-info">
						<view @click="goDetail(goodsItem.sku_id)" class="goods-name">{{ goodsItem.sku_name }}</view>
						<view class="sku" v-if="goodsItem.sku_spec_format">
							<view class="goods-spec">
								<block v-for="(x, i) in goodsItem.sku_spec_format" :key="i">
									{{ x.spec_value_name }} {{ i < goodsItem.sku_spec_format.length - 1 ? '; ' : '' }}
								</block>
							</view>
						</view>
						<view class="goods-sub-section">
							<view>
								<text class="goods-price color-base-text">
									<text class="unit">￥</text>
									<text class="font-size-base">{{ goodsItem.price }}</text>
								</text>
							</view>
							<view>
								<text class="font-size-base">
									<text class="iconfont iconclose"></text>
									{{ goodsItem.num }}
								</text>
							</view>
						</view>
						<view class="goods-action">
							<block v-if="orderData.is_enable_refund">
								<view @click="goRefund(goodsItem.order_goods_id)" v-if="goodsItem.refund_status == 0 || goodsItem.refund_status == -1">
									<view class="order-box-btn">{{ orderData.order_status == 10 ? '申请售后' : '申请退款' }}</view>
								</view>
							</block>
							<view @click="goRefundDetail(goodsItem.order_goods_id)" v-if="goodsItem.refund_status != 0 && goodsItem.refund_status != -1">
								<view class="order-box-btn">{{ orderData.order_status == 10 ? '查看售后' : '查看退款' }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单概况 -->
		<view class="order-summary">
			<view class="order-cell">
				<text class="tit">订单编号：</text>
				<view class="box">
					<text class="color-title">{{ orderData.order_no }}</text>
					<view class="copy" @click="$util.copy(orderData.order_no)">复制</view>
				</view>
			</view>
			<view class="order-cell">
				<text class="tit">订单交易号：</text>
				<view class="box">
					<text class="color-title">{{ orderData.out_trade_no }}</text>
				</view>
			</view>
			<view class="order-cell">
				<text class="tit">创建时间：</text>
				<view class="box">
					<text class="color-title">{{ orderData.create_time}}</text>
				</view>
			</view>
			<view class="order-cell" v-if="orderData.close_time > 0">
				<text class="tit">关闭时间：</text>
				<view class="box">
					<text class="color-title">{{ orderData.close_time }}</text>
				</view>
			</view>
			<block v-if="orderData.pay_status > 0">
				<view class="hr"></view>
				<view class="order-cell">
					<text class="tit">支付方式：</text>
					<view class="box">
						<text class="color-title">{{ orderData.pay_type_name }}</text>
					</view>
				</view>
				<view class="order-cell">
					<text class="tit">支付时间：</text>
					<view class="box">
						<text class="color-title">{{ orderData.pay_time}}</text>
					</view>
				</view>
			</block>
			<view class="order-cell" v-if="orderData.delivery_type_name">
				<text class="tit">配送方式：</text>
				<view class="box">
					<text class="color-title">{{ orderData.delivery_type_name }}</text>
				</view>
			</view>
			<view class="order-cell" v-if="orderData.buyer_message != ''">
				<text class="tit">买家留言：</text>
				<view class="box">
					<text class="color-title">{{ orderData.buyer_message }}</text>
				</view>
			</view>
			<view class="order-cell" v-if="orderData.promotion_type_name != ''">
				<text class="tit">活动优惠：</text>
				<view class="box">
					<text class="color-title">{{ orderData.promotion_type_name }}</text>
				</view>
			</view>
			<block v-if="orderData.is_invoice > 0">
				<view class="hr"></view>
				<view class="order-cell">
					<text class="tit">发票类型：</text>
					<view class="box">
						<text class="color-title">{{ orderData.invoice_type ==1 ? '纸质发票' : '电子发票'  }}</text>
					</view>
				</view>
				<view class="order-cell">
					<text class="tit">发票抬头类型：</text>
					<view class="box">
						<text class="color-title">{{ orderData.invoice_title_type ==1 ? '个人' : '企业' }}</text>
					</view>
				</view>
				<view class="order-cell">
					<text class="tit">发票抬头：</text>
					<view class="box">
						<text class="color-title">{{ orderData.invoice_title }}</text>
					</view>
				</view>
				
				<view class="order-cell">
					<text class="tit">发票内容：</text>
					<view class="box">
						<text class="color-title">{{ orderData.invoice_content }}</text>
					</view>
				</view>
				<view class="order-cell" v-if="orderData.invoice_type ==1">
					<text class="tit">发票邮寄地址：</text>
					<view class="box">
						<text class="color-title">{{ orderData.invoice_full_address }}</text>
					</view>
				</view>
				<view class="order-cell" v-else>
					<text class="tit">发票接收邮件：</text>
					<view class="box">
						<text class="color-title">{{ orderData.invoice_email }}</text>
					</view>
				</view>
			</block>
			<!-- 联系客服 -->
			<view class="kefu">
				<!-- #ifdef MP -->
				<!-- <button type="default" hover-class="none" open-type="contact" v-if="kefuConfig.weapp == 1">
					<text class="iconfont iconziyuan"></text>
					<text>联系客服</text>
				</button>
				<view v-else-if="kefuConfig.system == 1" @click="goConnect">
					<text class="iconfont iconziyuan"></text>
					<text>联系客服</text>
				</view> -->
				<!-- #endif -->
				<!-- <view v-if="kefuConfig.system == 1" @click="goConnect">
					<text class="iconfont iconziyuan"></text>
					<text>联系客服</text>
				</view> -->
				<!-- #ifndef MP -->
				<!-- <view v-if="kefuConfig.open == 1" @click="goConnect">
					<text class="iconfont iconziyuan"></text>
					<text>联系客服</text>
				</view>
				<view v-else-if="kefuConfig.system == 1" @click="goConnect">
					<text class="iconfont iconziyuan"></text>
					<text>联系客服</text>
				</view> -->
				<!-- #endif -->
			</view>
		</view>

		<!-- 订单金额 -->
		<view class="order-money">
			<view class="order-cell">
				<text class="tit">商品金额</text>
				<view class="box align-right">
					<text class="color-title">
						<text class="font-size-goods-tag">￥</text>
						{{ orderData.goods_money }}
					</text>
				</view>
			</view>
			<view class="order-cell">
				<text class="tit">运费</text>
				<view class="box align-right">
					<text class="color-base-text">
						<!-- <text class="operator">+</text> -->
						<text class="font-size-goods-tag">￥</text>
						<text>{{ orderData.delivery_money }}</text>
					</text>
				</view>
			</view>
			<view class="order-cell" v-if="orderData.member_card_money > 0">
				<text class="tit">会员卡</text>
				<view class="box align-right">
					<text class="color-base-text">
						<text class="font-size-goods-tag">￥</text>
						<text>{{ orderData.member_card_money }}</text>
					</text>
				</view>
			</view>
			<view class="order-cell" v-if="orderData.invoice_money > 0">
				<text class="tit">
					税费
					<text class="color-base-text">({{ orderData.invoice_rate }}%)</text>
				</text>
				<view class="box align-right">
					<text class="color-base-text">
						<text class="operator">+</text>
						<text class="font-size-goods-tag">￥</text>
						<text>{{ orderData.invoice_money }}</text>
					</text>
				</view>
			</view>
			<view class="order-cell" v-if="orderData.invoice_delivery_money > 0">
				<text class="tit">发票邮寄费</text>
				<view class="box align-right">
					<text class="color-base-text">
						<text class="operator">+</text>
						<text class="font-size-goods-tag">￥</text>
						<text>{{ orderData.invoice_delivery_money }}</text>
					</text>
				</view>
			</view>
			<view class="order-cell" v-if="orderData.adjust_money != 0">
				<text class="tit">订单调整</text>
				<view class="box align-right">
					<text class="color-base-text">
						<text class="operator" v-if="orderData.adjust_money < 0">-</text>
						<text class="operator" v-else>+</text>
						<text class="font-size-goods-tag">￥</text>
						<text>{{ orderData.adjust_money | abs }}</text>
					</text>
				</view>
			</view>
			<view class="order-cell" v-if="orderData.promotion_money > 0">
				<text class="tit">优惠</text>
				<view class="box align-right">
					<text class="color-base-text">
						<text class="operator">-</text>
						<text class="font-size-goods-tag">￥</text>
						<text>{{ orderData.promotion_money }}</text>
					</text>
				</view>
			</view>
			<view class="order-cell" v-if="orderData.coupon_money > 0">
				<text class="tit">优惠券</text>
				<view class="box align-right">
					<text class="color-base-text">
						<text class="operator">-</text>
						<text class="font-size-goods-tag">￥</text>
						<text>{{ orderData.coupon_money }}</text>
					</text>
				</view>
			</view>
			<!-- <view class="order-cell" v-if="orderData.balance_money > 0">
				<text class="tit">使用余额</text>
				<view class="box align-right">
					<text class="color-base-text">
						<text class="operator">-</text>
						<text class="font-size-goods-tag">￥</text>
						<text>{{ orderData.balance_money }}</text>
					</text>
				</view>
			</view> -->
			<view class="order-cell" v-if="orderData.point_money > 0">
				<text class="tit">积分抵扣</text>
				<view class="box align-right">
					<text class="color-base-text">
						<text class="operator">-</text>
						<text class="font-size-goods-tag">￥</text>
						<text>{{ orderData.point_money }}</text>
					</text>
				</view>
			</view>
			<view class="order-cell">
				<view class="box align-right">
					<text>实付金额：</text>
					<text class="color-base-text">
						<text class="font-size-goods-tag">￥</text>
						<text class="font-size-base">{{ orderData.pay_money }}</text>
					</text>
				</view>
			</view>

			<view class="order-action custom-order-action">
				<view class="order-box-btn white" v-if="evaluateConfig.evaluate_status == 1 && orderData.is_evaluate == 1" @click="operation('memberOrderEvaluation')">
					<text v-if="orderData.evaluate_status == 0">评价</text>
					<text v-else-if="orderData.evaluate_status == 1">追评</text>
				</view>
				<block v-if="orderData.order_status==0">
					<view  class="order-box-btn  color-base-border"  @click="operation('orderClose')">
						关闭订单
					</view>
					<view  class="order-box-btn  color-base-border" @click="operation('orderPay')">
						立即支付
					</view>
				</block>
				<!-- <block v-if="orderData.order_status==1">
					<view  class="order-box-btn  color-base-border" @click="operation('orderClose')">
						关闭订单
					</view>
				</block> -->
				<block v-if="orderData.order_status==3">
					<view  class="order-box-btn  color-base-border" @click="operation('memberTakeDelivery')">
						确认收货
					</view>
					<view  class="order-box-btn  color-base-border" @click="operation('trace')">
						查看物流
					</view>
				</block>
				<block v-if="orderData.order_status==4">
					<view  class="order-box-btn  color-base-border" @click="operation('trace')">
						查看物流
					</view>
				</block>
				<!-- <view
					class="order-box-btn"
					:class="operationItem.action == 'orderPay' ? 'color-base-bg color-base-border' : 'white'"
					v-for="(operationItem, operationIndex) in orderData.action"
					:key="operationIndex"
					@click="operation(operationItem.action)"
				>
					{{ operationItem.title }}
				</view> -->
			</view>
			<!-- <view
				class="order-action"
				:class="{ 'bottom-safe-area': isIphoneX }"
				v-else-if="orderData.action.length == 0 && orderData.is_evaluate == 1 && evaluateConfig.evaluate_status == 1"
			>
				<view class="order-box-btn white" @click="operation('memberOrderEvaluation')">
					<text v-if="orderData.evaluate_status == 0">评价</text>
					<text v-else-if="orderData.evaluate_status == 1">追评</text>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
import globalConfig from '@/common/js/golbalConfig.js';
  export default {
	data() {
		return {
			isIphoneX: false,
			orderId: 0,
			orderData: {
				action: []
			},
			action: {
				icon: ''
			},
			kefuConfig: {
				weapp: '',
				system: '',
				open: '',
				open_url: ''
			},
			evaluateConfig: {
				evaluate_audit: 1,
				evaluate_show: 0,
				evaluate_status: 1
			}
		};
	},
	mixins: [globalConfig],
	components: {
		
	},
	onLoad(option) {
		if (option.order_id) this.orderId = option.order_id;
	},
	onShow() {
		// 刷新多语言
		if (uni.getStorageSync('token')) {
			this.getOrderData();
			this.getEvaluateConfig();
		} else {
			this.$util.redirectTo('/pages/public/login', { back: '/otherpages/order/detail/detail?order_id=' + this.orderId });
		}
	},
	methods: {
		/**
		 * 订单支付
		 * @param {Object} out_trade_no
		 */
		orderPay(orderData) {
			let orderInfo={
				balance:0,
				out_trade_no:orderData.out_trade_no,
				total_money:orderData.pay_money
			}
			uni.navigateTo({
				url:"../../pages/money/pay?orderInfo="+JSON.stringify(orderInfo)
			})
		},
		/**
		 * 关闭订单
		 * @param {Object} order_id
		 */
		orderClose(order_id) {
			var _this=this
			uni.showModal({
				title: '提示',
				content: '您确定要关闭该订单吗？',
				success: res => {
					if (res.confirm) {
						this.$http.sendRequest({
							url: 'api/order/close',
							data: {
								order_id
							},
							success: res => {
								if(res.data.code=0){
									_this.getOrderData()
								}else{
									_this.$api.msg(res.data.message)
								}
							}
						})
					}
				}
			})
		},
		/**
		 * 订单收货
		 * @param {Object} order_id
		 */
		orderDelivery(order_id, callback) {
			let _this=this
			uni.showModal({
				title: '提示',
				content: '您确定已经收到货物了吗？',
				success: res => {
					if (res.confirm) {
						this.$http.sendRequest({
							url: 'api/order/takeDelivery',
							data: {
								order_id
							},
							success: res => {
								if(res.data.code=0){
									_this.getOrderData()
								}else{
									_this.$api.msg(res.data.message)
								}
							}
						})
					}
				},
			})
		},
		//联系客服
		goDetail(id) {
			this.$util.redirectTo('/pages/goods/detail/detail', { sku_id: id });
		},
		goRefund(id) {
			this.$util.redirectTo('/pages/order/refund/refund', { order_goods_id: id });
		},
		goRefundDetail(id) {
			this.$util.redirectTo('/pages/order/refund_detail/refund_detail', { order_goods_id: id });
		},
		getOrderData() {
			this.$http.sendRequest({
				url: '/api/order/detail',
				data: {
					order_id: this.orderId
				},
				success: res => {
					uni.stopPullDownRefresh();
					if (res.data.code >= 0) {
						this.orderData = res.data.data;
					} else {
						this.$util.showToast({
							title: '未获取到订单信息！'
						});
						setTimeout(() => {
							this.$util.redirectTo('/otherpages/order/order?status=0');
						}, 1500);
					}
				},
				fail: res => {
					uni.stopPullDownRefresh();
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		},
		/**
		 * 下拉刷新
		 */
		onPullDownRefresh() {
			this.getOrderData();
		},
		operation(action) {
			switch (action) {
				case 'orderPay': // 支付
					this.orderPay(this.orderData);
					break;
				case 'orderClose': //关闭
					this.orderClose(this.orderData.order_id, () => {
						this.getOrderData();
					});
					break;
				case 'memberTakeDelivery': //收货
					this.orderDelivery(this.orderData.order_id, () => {
						this.getOrderData();
					});
					break;
				case 'trace': //查看物流
					this.$util.redirectTo('/otherpages/order/logistics/logistics', { order_id: this.orderData.order_id });
					break;
				case 'memberOrderEvaluation': //评价
					this.$util.redirectTo('/otherpages/order/evaluate/evaluate', { order_id: this.orderData.order_id });
					break;
			}
		},
		imageError(index) {
			this.orderData.order_goods[index].sku_image = this.$util.getDefaultImage().default_goods_img;
			this.$forceUpdate();
		},
		getEvaluateConfig() {
			this.$http.sendRequest({
				url: 'api/goodsevaluate/config',
				success: res => {
					if (res.data.code == 0) {
						var data = res.data.data;
						this.evaluateConfig = data;
					}
				}
			});
		},
		// 显示选择支付方式弹框
		openChoosePayment() {
			this.$refs.choosePaymentPopup.open();
		}
	},
	filters: {
		abs(value) {
			return Math.abs(parseFloat(value)).toFixed(2);
		}
	}
};
</script>
<style lang="scss">
	page{
		background-color: #f2f2f2;
	}
</style>
<style lang="scss">
@import './public/css/detail.scss';
</style>
